<template>
	<view class="content-collect">
		<view class="top-nav">
			<view class="top-nav__li" :class="navIndex == 0 ? 'active' : ''" @tap="changeNav(0)"
				>收藏</view
			>
			<view class="top-nav__li" :class="navIndex == 1 ? 'active' : ''" @tap="changeNav(1)"
				>足迹</view
			>
		</view>
		<view class="goods-list">
			<view v-if="navIndex == 0">
				<block v-for="(item, index) in list" :key="index">
					<goods-item :item="item" v-if="item.superGoods == 0"></goods-item>
					<goods-item
						:item="item"
						type="superGoods"
						v-if="item.superGoods == 1"
					></goods-item>
				</block>
			</view>
			<view v-if="navIndex == 1">
				<block v-for="(item, index) in footerList" :key="index">
					<div>
						<div class="foot-time">
							<div class="foot-time__line"></div>
							<div class="foot-time__point"></div>
							{{ index }}
							<div class="foot-time__point"></div>
							<div class="foot-time__line"></div>
						</div>
						<block v-for="(itemF, indexF) in item" :key="indexF">
							<goods-item :item="itemF"></goods-item>
						</block>
					</div>
				</block>
			</view>
			<load-more
				:empty="empty"
				emptyText="没有心动商品，快去逛逛吧～"
				emptyType="collect"
			></load-more>
			<load-more :finished="finished"></load-more>
		</view>
	</view>
</template>

<script>
import GoodsItem from '@/components/GoodsItem';
import LoadMore from '@/components/LoadMore';
import _ from '@/utils/packges/lodash.js';
export default {
	data() {
		return {
			navIndex: 0,
			list: [],
			footerList: [],
			params: {
				page: 1,
				size: 20
			},
			empty: false, // 控制是否为空数据
			finished: false,
			pagination: {}
		};
	},
	components: {
		GoodsItem,
		LoadMore
	},
	onShow() {
		this.getGoods({ ...this.params });
	},

	methods: {
		changeNav(i) {
			this.navIndex = i;
			this.getGoods({ ...this.params });
		},
		getGoods(params) {
			if (this.navIndex == 0) {
				this.$service.collectedGoods.goods.page({ ...params, collected: 1 }).then(res => {
					uni.stopPullDownRefresh();
					if (params.page > 1) {
						this.list = this.list.concat(res.list);
					} else {
						this.list = res.list;
					}
					this.pagination = res.pagination;
					if (res.pagination.total == 0) {
						this.empty = true;
					} else {
						this.empty = false;
						if (
							res.pagination.page *
								(res.pagination.pageSize || res.pagination.size) >=
							res.pagination.total
						) {
							this.finished = true;
						} else {
							this.finished = false;
						}
					}
				});
			} else {
				this.$service.collectedGoods.goods.page({ ...params, collected: 3 }).then(res => {
					uni.stopPullDownRefresh();
					if (params.page > 1) {
						this.list = this.list.concat(res.list);
					} else {
						this.list = res.list;
					}

					this.footerList = _.groupBy(this.list, 'createTime');

					this.list;
					this.pagination = res.pagination;
					if (res.pagination.total == 0) {
						this.empty = true;
					} else {
						this.empty = false;
						if (
							res.pagination.page *
								(res.pagination.pageSize || res.pagination.size) >=
							res.pagination.total
						) {
							this.finished = true;
						} else {
							this.finished = false;
						}
					}
				});
			}
		}
	},
	onPullDownRefresh() {
		this.getGoods({ ...this.params });
	},
	onReachBottom() {
		if (
			this.pagination.page * (this.pagination.pageSize || this.pagination.size) >=
			this.pagination.total
		) {
			this.finished = true;
		} else {
			this.getGoods({
				...this.params,
				page: this.pagination.page + 1
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.content-collect {
	.top-nav {
		width: 100%;
		height: 80rpx;
		background: #f70114;
		color: #ffffff;
		font-size: 32rpx;
		@include flexBox(space-around, center);
		padding-bottom: 10rpx;
		.top-nav__li {
			height: 100%;
			&.active {
				border-bottom: 5px solid #ffffff;
			}
		}
	}
	.goods-list {
		/deep/.goods-item {
			width: 722rpx;
			margin: auto;
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
		}
		.foot-time {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #d4d1de;
			font-size: 24rpx;
			margin-top: 20rpx;
			.foot-time__point {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #d4d1de;
				margin: 0 12rpx;
			}
			.foot-time__line {
				width: 70rpx;
				height: 2rpx;
				border: 2rpx solid #d4d1de;
			}
		}
	}
}
</style>
